<template>
  <div class="login" style="height: 100vh;overflow: hidden">
    <!--主体-->
    <div class="main">
      <div class="top animate__animated animate__bounce">登 录</div>
      <div>
        <el-form :model="form" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input placeholder="请输入账号" clearable autofocus prefix-icon="el-icon-user" size="medium"
                      v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" clearable show-password prefix-icon="el-icon-lock" size="medium"
                      v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="请选择用户类型">
            <el-radio v-model="form.usertype" label="学生"></el-radio>
            <el-radio v-model="form.usertype" label="教师"></el-radio>
            <el-radio v-model="form.usertype" label="管理员"></el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" style="width: 100%" @click="login">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <label>如果没有账号，请点击
          <el-button type="text" plain size="medium" @click="dialogVisibleforregister = true">【注册账号】</el-button>
        </label><br>
        <label>如果忘记账号密码，请点击
          <el-button type="text" plain size="medium" @click="dialogVisibleforfindPwd = true">【找回密码】</el-button>
        </label>
      </div>
    </div>

    <!--注册账号弹出框-->
    <el-dialog title="注册账号" :visible.sync="dialogVisibleforregister" width="30%">
      <el-form :model="form" :rules="rules" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repeatPassword">
          <el-input v-model="form.repeatPassword" show-password style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-radio v-model="form.usertype" label="学生"></el-radio>
          <el-radio v-model="form.usertype" label="教师"></el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleforregister = false">取 消</el-button>
        <el-button type="primary" @click="register">注 册</el-button>
      </span>
    </el-dialog>

    <!--找回密码弹出框-->
    <el-dialog title="找回密码" :visible.sync="dialogVisibleforfindPwd" width="30%">
      <el-form :model="form" :rules="rules" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-radio v-model="form.usertype" label="学生"></el-radio>
          <el-radio v-model="form.usertype" label="教师"></el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleforfindPwd = false">取 消</el-button>
        <el-button type="primary" @click="findPassword">找回密码</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie'

export default {
  name: "Login",
  data() {
    return {
      dialogVisibleforregister: false,
      dialogVisibleforfindPwd: false,
      form: {
        username: '',
        password: '',
        usertype: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        repeatPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    login() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          if (this.form.usertype === '学生') {
            request.get("/login/checkStudentStatus/" + this.form.username).then(res => {
              if (res.data === '1') {
                request.post("/login/studentLogin", this.form).then(res => {
                  if (res.code === '200') {
                    this.$notify.success("登陆成功");
                    if (res.data != null) {
                      Cookies.set('student', JSON.stringify(res.data))
                    }
                    this.$router.push('/studentIndex/home');
                  } else {
                    this.$notify.error('密码错误');
                    this.form = {username: '', password: '', usertype: ''}
                  }
                })
              } else if (res.data === '0') {
                this.$notify.error('该账号已被禁用，请联系管理员解封账号')
              } else if (res.data === null) {
                this.$notify.error('该用户名不存在')
                this.form = {username: '', password: '', usertype: ''}
              }
            })
          } else if (this.form.usertype === '教师') {
            request.get("/login/checkTeacherStatus/" + this.form.username).then(res => {
              if (res.data === '1') {
                request.post("/login/teacherLogin", this.form).then(res => {
                  if (res.code === '200') {
                    this.$notify.success("登陆成功");
                    if (res.data != null) {
                      Cookies.set('teacher', JSON.stringify(res.data))
                    }
                    this.$router.push('/teacherIndex/home');
                  } else {
                    this.$notify.error('密码错误');
                    this.form = {username: '', password: '', usertype: ''}
                  }
                })
              } else if (res.data === '0') {
                this.$notify.error('该账号已被禁用，请联系管理员解封账号')
              } else if (res.data === null) {
                this.$notify.error('该用户名不存在')
                this.form = {username: '', password: '', usertype: ''}
              }
            })
          } else if (this.form.usertype === '管理员') {
            request.post("/login/adminLogin", this.form).then(res => {
              if (res.code === '200') {
                this.$notify.success("登陆成功");
                if (res.data != null) {
                  Cookies.set('admin', JSON.stringify(res.data))
                }
                this.$router.push('/adminIndex/home');
              } else {
                this.$notify.error('用户名或密码错误');
                this.form = {username: '', password: '', usertype: ''}
              }
            })
          }
        }
      })
    },    //登录
    register() {
      request.post('/login/register/', this.form).then(res => {
        if (res.code === '200') {
          this.$notify.success('注册成功')
          this.dialogVisibleforregister = false
          this.form = {username: '', password: '', usertype: ''}
        } else {
          this.$notify.error('该用户名不存在，请联系管理员添加此用户名')
        }
      })
    },   //注册
    findPassword() {
      console.log(this.form)
      request.post('/login/findPassword/', this.form).then(res => {
        if (res.code === '200') {
          this.$notify.success('密码为：' + res.data)
          this.dialogVisibleforfindPwd = false
          this.form = {username: '', password: '', usertype: ''}
        } else {
          this.$notify.error('该用户名不存在')
        }
      })
    }    //找回密码
  }
}
</script>

<style scoped>
.login {
  background: url("../../assets/bg.jpeg") no-repeat center center fixed;
  background-size: 100% 100%;
}
.main {
  width: 500px;
  height: 400px;
  padding: 50px;
  margin: 150px auto;
  background-color: rgba(255,255,255,0.6);
  border-radius: 20px;
}
.top {
  margin-bottom: 20px;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  color: blueviolet
}
.sign {
  color: red;
  text-decoration: none
}

.sign:hover {
  color: skyblue;
}
</style>

